<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 媒体查询+rem实现元素宽高的动态变化 */
        /* 1. 利用媒体查询检测屏幕的宽度，不同宽度下设置html的字体的大小为不同值 */
        /* 2. 元素的宽高、内外边距等之前用px作为单位的值，都转换成rem单位，就可以实现元素宽高的等比变换了  */
        /* 3. 通常会把视口宽度 除以 10 、20  作为 html 字号大小*/

        /* 针对iphone5 320px宽度的屏幕 */

        /* 小于320px的屏幕 都让 1rem 等于 30px */
        @media screen and (max-width: 319px) {
            html {
                font-size: 30px;
            }
        }

        @media screen and (min-width: 320px) {
            html {
                /* 视口宽度 /  10 */
                font-size: 32px;;
            }
        }

        @media screen and (min-width: 360px) {
            html {
                /* 视口宽度 /  10 */
                font-size: 36px;;
            }
        }

        @media screen and (min-width: 375px) {
            html {
                /* 视口宽度 /  10 */
                font-size: 37.5px;;
            }
        }

        @media screen and (min-width: 540px) {
            html {
                /* 视口宽度 /  10 */
                font-size: 54px;;
            }
        }
        
        div {
            width: 5rem;
            height: 5rem;
            background-color: violet;
            margin: 2rem;
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
</body>

</html>